// @ts-ignore
import styled from "styled-components";
type propsType={
  $size?:Number,
};
const FilterBarStyle=styled.ul<propsType>`
  display: flex;
  font-size: ${(props: propsType) => props.$size ? props.$size : "16"}px;
  font-weight: 100;
  margin: ${(props:propsType)=>props.$size?`calc(${props.$size}px / 0.8)`:"20px"} 0;
  li {
    margin: 0 ${(props: propsType) => props.$size ? `calc(${props.$size}px / 3.2)` : "5px"};
    padding: ${(props: propsType) => props.$size ? `calc(${props.$size}px / 3.2)` : "5px"} ${(props: propsType) => props.$size ? `calc(${props.$size}px / 1.6)` : "10px"} ${(props: propsType) => props.$size ? `calc(${props.$size}px / 2.7)` : "6px"};
    cursor: pointer;
  }
  li:hover {
    color: var(--theme-color);
  }

  .sing-screen-current {
    background: var(--theme-color);
    color: var(--theme-white);
  }

  .sing-screen-current:hover {
    color: var(--theme-white) !important;
  }
`;
export default FilterBarStyle;
